<template>
  <div id="app">
    <router-view></router-view>

    <transition name="fade">
     <div v-if="!siteInit" class="mt-page-loading" data-flex="center">
       <div>
         <div data-flex="main-center">
           <svg width="160px" height="140px" viewBox="0 0 54 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
            <defs></defs>
            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
              <path class="beat-loader" d="M0.5,38.5 L16,38.5 L19,25.5 L24.5,57.5 L31.5,7.5 L37.5,46.5 L43,38.5 L53.5,38.5" stroke-width="1" sketch:type="MSShapeGroup"></path>
            </g>
          </svg>
         </div>
        <p class="tc">数据正在初始化<span class="mt-page-loading-dot">...</span></p>
       </div>
     </div>
    </transition>

  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'app',
  computed: mapState({
    siteInit: state => state.app.siteInit,
  }),
}
</script>

<style lang="less">
@import '../src/assets/css/mt-lib.less';
@import '../src/assets/css/mt-weui.less';
@import '../src/assets/css/mt-lib-mixins.less';

body { background-color: #fbf9fe; }

// http://codepen.io/WixelHQ/pen/pygrwe?editors=1100
// loading 心电图
.beat-loader{
  stroke: #FFEA09;
  stroke-dasharray: 175;
  stroke-dashoffset: 350;
  animation:draw 1.4s linear;
  animation-iteration-count:infinite;
}

@keyframes draw{
  to{
    stroke-dashoffset: 0;
  }
}

// 点点动画
.mt-page-loading-dot {
  display: inline-block;
  width: 3ch;
  text-indent: -1ch;
  text-align: left;
  vertical-align: bottom;
  overflow: hidden;
  animation: dot 2s infinite step-start both;
  font-family: Consolas, Monaco, monospace;
}

@keyframes dot {
    33% { text-indent: 0; }
    66% { text-indent: -2ch; }
}


// http://www.zhangxinxu.com/study/201607/animation-text-indent-dot-dot-dot-wait.html
// http://tawian.io/text-spinners/

.mt-page-loading{
  position: fixed;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  background: #4AE0D8;
  color:#fff;
  font-size: 32px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

// mt-title
.mt-page-tit{
  font-size: 48px; color: #333; text-align: center;
  margin-top: 70px;
  margin-bottom: 45px;
  line-height: 1;
}
.mt-page-tit__desc{
  font-size: 28px; color: #888; text-align: center;
  margin-bottom: 60px;
  line-height: 1;
}
.mt-page__bd_spacing{
  padding: 0 30px;
}
//mt-wizard
.mt-wizard{
  height: 88px;
  background-color: #fff;
  border-bottom: 1px solid @border-color-base;
  &__item{
    padding-top: 30px;
    padding-left: 50px;
    font-size: 28px;
    line-height: 1;
    color:@color-text-caption;
    position: relative;
    &:after{
      content: " ";
      .setArrow(right, 12px, #C8C8CD, 2px);
      position: absolute;
      top: 70%;
      right: 0;
      margin-top: -4px;
    }
    &_last{
      &:after{
        border:none;
      }
    }
    &_active{
      color:@color-text-paragraph;
    }
  }
}


@keyframes imgFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

img[lazy=loaded] {
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: imgFadeIn;
}

img[lazy=error] {
  border-radius: 2px;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: imgFadeIn;
}
</style>
